<template>
  <!-- 侧边栏菜单 -->
  <!--  :router=true或者只写router, 表示开启路由模式,以菜单绑定的index值作为路由路径-->
  <!-- default-active默认激活的菜单 -->
  <el-menu :unique-opened="true" background-color="#333744" text-color="#fff" active-text-color="#409eff" :collapse="isCollapse" :collapse-transition="true" router :default-active="store.state.tags.activePath">
    <!-- 一级菜单 -->
    <el-sub-menu v-for="item in menuData" :index="item.id" :key="item.id" @click="changBackColor(item.id)">
      <!-- 一级菜单的模板区域 -->
      <template #title>
        <!-- 图标 -->
        <!-- <i :class="iconObj[item.id]"></i> -->
        <!-- 文本 -->
        <div class="sub_menu" :style="{ background: item.isActive == true ? '#409eff' : '#333744' }"></div>
        <el-icon>
          <component :is="item.icon"></component>
        </el-icon>
        <span>{{ item.authName }}</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item v-for="childItem in item.children" :index="childItem.path" :key="childItem.id" @click="selectMenu(childItem)">
        <template #title>
          <!-- 图标 -->
          <el-icon><component is="Menu"></component></el-icon>
          <span>{{ childItem.authName }}</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { getCurrentInstance, ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getMenusByUserId, getMenus } from "network/permissions";
import { messageUtils } from "assets/js/messageUtils";
import { getDataRowsByTree } from "assets/js/utils";
import { Permission } from "@/model/dataModel.js";
const { proxy } = getCurrentInstance();
const router = useRouter();
const store = useStore();

const props = defineProps({
  isCollapse: {
    type: Boolean,
    value: false,
  },
});
let menuData = ref([
  {
    id: "",
    icon: "",
    authName: "",
  },
]);

const getMenuDate = async () => {
  const tokenInfoModel = JSON.parse(window.sessionStorage.getItem("token"));
  const res = await getMenusByUserId("tree", tokenInfoModel.uId);
  // const res = await getMenus("tree");
  if (res.success && res.response) {
    menuData.value = res.response;
    const response = JSON.stringify(res.response);
    const permissionList = getDataRowsByTree(JSON.parse(response));
    const buttonPermissions = permissionList.filter((p) => p.level == 2).map((p) => new Permission(p));
    sessionStorage.setItem("btnPermission", JSON.stringify(buttonPermissions));
  } else {
    messageUtils.messageError(msg);
  }
};
getMenuDate(); //在setup中调用,相当于在created和beforeCreated生命周期之前调用

//选中时增加底色
const changBackColor = (id) => {
  menuData.value.forEach((element) => {
    element.isActive = false;
  });
  let data = menuData.value.filter((m) => m.id == id);
  data[0].isActive = true;
};

//选择菜单
const selectMenu = (item) => {
  store.commit("tags/addKeepAliveCache", item.componentName);
  store.commit("tags/selectMenu", item);
};
//初始化一级菜单被选中的状态
const changMenuNavigation = () => {
  const activePath = store.state.tags.activePath;
  menuData.value.forEach((item) => {
    item.isActive = false;
    const childItem = item.children.filter((c) => c.path == activePath);
    if (childItem.length > 0) {
      item.isActive = true;
    }
  });
};
proxy.$bus.on("changMenuNavigation", () => {
  changMenuNavigation();
});
</script>

<style lang="less" scoped>
.sub_menu {
  width: 5px;
  height: 40%;
  position: relative;
  right: 10px;
}
.el-menu {
  border-right: 0px;
}
</style>
